<template>
  <div class="upload-container">
    <el-upload :action="''" :auto-upload="false" :before-upload="beforeAvatarUpload" :show-file-list="false"
      :on-change="onChange" class="avatar-uploader">
      <el-image v-if="flag" style="width: 100%; height: 100%" :src="urlvalue"> </el-image>
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</template>
<script>
import { getToken } from '@/utils/auth'
import { getconfigUrl } from '@/api/sys/user'
export default {
  data() {
    return {
      urlvalue: '',
      flag: false,
      imageList: [],
      resultUrl: undefined,
      myHeaders: { access_token: getToken() },
      uploadImageUrl: '',
    }
  },

  methods: {
    fun(item) {
      getconfigUrl({
        params: {
          userId: item.id,
        },
      }).then((res) => {
        if (res.data.code == 0) {
          this.flag = true
          this.urlvalue = res.data.msg
        }
      })
    },
    handleChange(file) {
      this.onChange(file.raw)
    },
    onChange(file) {
      const reader = new FileReader()
      reader.readAsDataURL(file.raw)
      reader.onload = (e) => {
        this.urlvalue = e.target.result
        this.flag = true
        this.$emit('urlWatch', this.urlvalue)
        this.$emit('filename', file.raw)
      }
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 8;


      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 8KB!');
      }
      return isJPG && isLt2M;
    }
  },
}
</script>
<style></style>
